<template>
  <div id="ActivateChart" class="echart-main bg_fff" style="width: 100%;height: 250px;"></div>
</template>

<script>

import * as echarts from 'echarts/core';
// 柱状图图表，图表后缀都为 Chart
import { BarChart } from 'echarts/charts';
// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent
} from 'echarts/components';
// 标签自动布局、全局过渡动画等特性
import { LabelLayout, UniversalTransition } from 'echarts/features';
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers';

// 注册必须的组件
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  BarChart,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer
]);
export default {
  components: {
  },

  props: {
    dataList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      myChart: null,
      option: null,
    };
  },

  mounted() {

  },

  methods: {
    initData (list, dataType) {
      if (this.myChart) {
        this.setOption(list, dataType)
        return
      } else {
        setTimeout(() => {
          this.initChart(list, dataType)
        }, 500)
      }
    },

    initChart (list, dataType) {
      const chartDom = document.getElementById('ActivateChart')
      this.myChart = echarts.init(chartDom)

      const colors = ['#D1FB71']
      this.option = {
        color: colors,
        // legend: {
        //   data: ['总收入']
        // },
        grid: {
          left: '16px',
          right: '16px',
          top: '20px',
          bottom: '10px',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          extraCssText: "z-index:3",
          axisPointer:{ type: 'shadow' } // 触发效果 移动上去 背景效果
        },
        xAxis: {
          type: 'category',
          data: [],
          axisLabel: {
            color: "#8C8C8C",
            fontSize: 11,  
          },
          axisLine: { // 坐标轴样式
            color: "#8C8C8C",
            lineStyle: { // 线的样式
              color: '#E7E7E7',
              opacity: 0.5 // 透明度
            },
          },
          axisTick:false, // 是否显示刻度
        },
        yAxis: {
          type: 'value',
          splitLine: { // 分隔辅助线
            lineStyle: {
              type: 'dashed', // 线的类型 虚线0
              opacity: 0.5 // 透明度
            },
          },
          axisLabel: {
            color: "#8C8C8C",
            fontSize: 11,
          }
        },
        series: [
          {
            name: dataType == 1 ? '累计数据' : '每期数据',
            data: [],
            type: 'bar',
            barWidth: '4',
            itemStyle: {
              normal: {
                color: '#D1FB71'
              }
            }
          }
        ]
      }
      this.setOption(list)
    },

    setOption(list, dataType) {
      try {
        const data1 = list.map(item => {
          return item.value
        })
        const data2 = list.map(item => {
          return item.time
        })
        this.option.series[0].data = data1
        this.option.series[0].name = dataType == 1 ? '累计数据' : '每期数据'
        this.option.xAxis.data = data2
        this.myChart.clear()
        this.option && this.myChart.setOption(this.option)
        window.addEventListener('resize', () => {
          this.myChart.resize()
        })
      } catch (error) {
        console.log(error)
      }
    }
  }
};
</script>

<style lang="less" scoped>

</style>
